<template>
  <div class="history" v-wechat-title="title">
    <ul class="mrelease_daohang clearfix" ref="topNavUl">
      <li :class="{action:num==0}" @click="num=0">转铺</li>
      <li :class="{action:num==1}" @click="num=1">求租</li>
      <div class="line" :style="'left:' + (num * (width / 2) + (width / 2 - 20) / 2 * 1) + 'px;'"></div>
    </ul>
    <company-shops v-show="num==0"></company-shops>
    <company-rent v-show="num==1"></company-rent>
  </div>
</template>

<script>
import CompanyShops from './components/CompanyShops'
import CompanyRent from './components/CompanyRent'
export default {
  name: 'history',
  components: {
    CompanyShops,
    CompanyRent
  },
  data () {
    return {
      title: '浏览记录',
      num: 0,
      numLeft: 0,
      width: 0
    }
  },
  mounted () {
    this.width = this.$refs.topNavUl.offsetWidth
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.history
  height 100%
.mrelease_daohang
  width 100%
  position fixed
  top 0px
  z-index 99
  background-color #fff
  li
    width 50%
    float left
    line-height 1rem /* 50/50 */
    height 1rem /* 50/50 */
    text-align center
    color #666666
    font-size .36rem /* 18/50 */
  .action
    color #F6360A
  .line
    width 20px
    height 3px
    position absolute
    bottom 0rem /* 0/50 */
    left 0px
    background linear-gradient(-90deg, #F14510, #EE340F)
    border-radius 2px
</style>
